﻿<div class="dialog-container mdl-shadow--8dp mdl-layout--fixed-header MachineList-dialog" ng-init="dialog.init();">
    <div class="kmi-header-row">
        <div class="header-title" ng-bind="'A02.accListTitle' | translate"></div>
        <div class="kmi-side-btn right" ng-click="dialog.back();">
            <img src="image/icons/clear.png"></img>
            <div class="kmi-can-click"></div>
        </div>
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-layout-page">
            <div class="kmi-list column-selector">
                <div class="kmi-list__header">
                    <div class="kmi-list__column head-controls" style="flex:1;">
                        <div class="filter" ng-show="dialog.dispatch_filterSH.accessory_no">
                            <input ng-model="dialog.dispatch_filter.accessory_no">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                               ng-click="dialog.dispatch_filterSH.accessory_no = false;dialog.dispatch_filter.accessory_no = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="dialog.dispatch_filterSH.accessory_no">
                            <i class="material-icons search" style="z-index:1;" ng-click="dialog.dispatch_filterSH.accessory_no = true">search</i>
                            <label ng-bind="'A02.accDetail.column1'| translate"></label>
                            <i class="material-icons" ng-show="dialog.order_by_mode.name == 'accessory_no'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                            <div class="kmi-can-click" ng-click="dialog.orderbychange('accessory_no')"></div>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls" style="flex:1;">
                        <div class="filter" ng-show="dialog.dispatch_filterSH.accessory_type">
                            <input ng-model="dialog.dispatch_filter.accessory_type">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                               ng-click="dialog.dispatch_filterSH.accessory_type = false;dialog.dispatch_filter.accessory_type = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="dialog.dispatch_filterSH.accessory_type">
                            <i class="material-icons search" style="z-index:1;" ng-click="dialog.dispatch_filterSH.accessory_type = true">search</i>
                            <label ng-bind="'A02.accDetail.column2'| translate"></label>
                            <i class="material-icons" ng-show="dialog.order_by_mode.name == 'accessory_type'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                            <div class="kmi-can-click" ng-click="dialog.orderbychange('accessory_type')"></div>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls" style="flex:1;">
                        <div class="filter" ng-show="dialog.dispatch_filterSH.accessory_category">
                            <input ng-model="dialog.dispatch_filter.accessory_category">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                               ng-click="dialog.dispatch_filterSH.accessory_category = false;dialog.dispatch_filter.accessory_category = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="dialog.dispatch_filterSH.accessory_category">
                            <i class="material-icons search" style="z-index:1;" ng-click="dialog.dispatch_filterSH.accessory_category = true">search</i>
                            <label ng-bind="'A02.accDetail.column3'| translate"></label>
                            <i class="material-icons" ng-show="dialog.order_by_mode.name == 'accessory_category'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                            <div class="kmi-can-click" ng-click="dialog.orderbychange('accessory_category')"></div>
                        </div>
                    </div>
                </div>
                <div class="kmi-list__row-content">
                    <div class="kmi-list__row" ng-repeat="item in dialog.getPages(dialog.product_acc_detail, dialog.PageConfig, dialog.dispatch_filter) track by $index">
                        <div class="kmi-list__column" style="flex:1;" ng-bind="item.accessory_no"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="item.accessory_type"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="item.accessory_category"></div>
                    </div>
                </div>
            </div>
            <div class="page-content">
                <div class="page-icon">
                    <img src="image/icons/dropleft.png"></img>
                    <div class="kmi-can-click" ng-click="dialog.PageConfig.page = (dialog.PageConfig.page-1<0?0:dialog.PageConfig.page-1);"></div>
                </div>
                <label ng-bind="(dialog.PageConfig.page +1)+' / '+dialog.PageConfig.total_page"></label>
                <div class="page-icon">
                    <img src="image/icons/dropright.png"></img>
                    <div class="kmi-can-click" ng-click="dialog.PageConfig.page = (dialog.PageConfig.page+1>(dialog.PageConfig.total_page-1)?(dialog.PageConfig.total_page-1):dialog.PageConfig.page+1);"></div>
                </div>
            </div>
        </div>
    </div>
</div>
